<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">


<style>

    .starability-container {
        margin: 0 auto;
        padding-top: 1em;
        padding-left: 1.3em;
        padding-right: 1.3em;
        border-bottom: 1px solid #e8e9f5;
    }

    .starability-container h3 {
        color: #717490;
        font-size: 1.05em;
        font-family: microsoft yahei, 宋体, segoe ui, lucida grande, Helvetica, Arial, sans-serif, FreeSans, Arimo;
        margin-bottom: 15px;
    }

    .evaluation_text_box {
        width: 100%;
        margin-right: 1em;
        height: 100px;
        padding: 1em;
        border-radius: 5px;
        resize: none;
        margin-bottom: 20px;
        background-color: rgba(220, 220, 220, 0.15);
    }

    .starability-slot {
        left: 20px;
    }

</style>


<script>

    loadcss('https://cdn.staticfile.org/starability/2.4.2/starability-css/starability-all.css');

</script>


<div id="evaluate-content-all" style="overflow-y: scroll;background-color: white">

    <script>

        let height = $(window).height();

        $('#evaluate-content-all').height(height - 50);

    </script>


    <div style="height: fit-content;padding-top: 20px">


        <form id="evaluate-form">


            <section>
                <div class="starability-container">
                    <h3>环境 :</h3>
                    <fieldset class="starability-slot">
                        <input type="radio" id="rate1-1" name="environment" value="1">
                        <label for="rate1-1" title="Terrible">1 star</label>

                        <input type="radio" id="rate2-1" name="environment" value="2">
                        <label for="rate2-1" title="Not good">2 stars</label>

                        <input type="radio" id="rate3-1" name="environment" value="3">
                        <label for="rate3-1" title="Average">3 stars</label>

                        <input type="radio" id="rate4-1" name="environment" value="4">
                        <label for="rate4-1" title="Very good">4 stars</label>

                        <input type="radio" id="rate5-1" name="environment" value="5">
                        <label for="rate5-1" title="Amazing">5 stars</label>

                    </fieldset>
                </div>
            </section>

            <section>
                <div class="starability-container">
                    <h3>服务 :</h3>
                    <fieldset class="starability-slot">
                        <input type="radio" id="rate1-2" name="service" value="1">
                        <label for="rate1-2" title="Terrible">1 star</label>


                        <input type="radio" id="rate2-2" name="service" value="2">
                        <label for="rate2-2" title="Not good">2 stars</label>

                        <input type="radio" id="rate3-2" name="service" value="3">
                        <label for="rate3-2" title="Average">3 stars</label>

                        <input type="radio" id="rate4-2" name="service" value="4">
                        <label for="rate4-2" title="Very good">4 stars</label>


                        <input type="radio" id="rate5-2" name="service" value="5">
                        <label for="rate5-2" title="Amazing">5 stars</label>

                    </fieldset>
                </div>
            </section>


            <section>
                <div class="starability-container" style="border: 0">

                    <h3>评价 :</h3>
                    <label title="evaluation">
                <textarea onblur="window.scroll(0,0)" id="evaluation_text_box" maxlength="200" class="evaluation_text_box"
                          name="evaluation"></textarea>
                    </label>

                </div>
            </section>

        </form>

        <div style="text-align: center;">

            <button id="evaluate-submit" style="    width: 120px;
            font-weight: bolder;
    height: 40px;
    background: #287CD4;
    color: #fff;
    border: 0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 5em;
    margin-top: 5em">
                提交点评
            </button>

        </div>

        <script>

            $('#evaluation_text_box')
                .bind("input propertychange", function (event) {

                    if (this.value.length > 50) {
                        this.value = this.value.substr(0, 50);
                    }

                });

            Event.on('dynamicPage_close', function () {
                //还原数据
                $('#evaluation_text_box').val('');

                $('#rate5-1').attr('checked','true');

                $('#rate5-2').attr('checked','true');
            });

            $('#evaluate-submit').click(
                function () {


                    let v = $('#evaluate-form').serialize();

                    dynamicPage.close();

                    //发起广播
                    Event.fanout('evaluate-submit', v);

                }
            );


        </script>

    </div>
</div>